<template>
    <v-overlay v-model="containerStatus" v-if="containerStatus" class="align-center justify-center">
        <v-progress-circular color="primary" size="64" indeterminate></v-progress-circular>
    </v-overlay>
    <v-card v-else-if="!showErrorPage">
        <v-layout>
            <v-navigation-drawer width="220" v-model="drawer" :rail="rail" permanent @click="rail = false">
                <v-list-item :prepend-avatar="require('@/assets/img/avatar.png')" nav v-if="userInfo != null"
                    :title="userInfo.nickname != null ? userInfo.nickname : userInfo.username">
                    <template v-slot:append>
                        <v-btn icon="mdi-chevron-left" variant="text" @click.stop="rail = !rail"></v-btn>
                    </template>
                </v-list-item>

                <v-divider></v-divider>

                <v-list density="compact" nav color="primary">
                    <v-list-item v-for="(menu, index) in menuList" :prepend-icon="menu.prepIcon" :title="menu.title"
                        :value="menu.value" :to="menu.to" v-bind:key="index" @click="menuClick(index)"></v-list-item>
                </v-list>
            </v-navigation-drawer>
            <v-main style="height: 100vh;">
                <v-app-bar color="primary" :title="appBarTitle"></v-app-bar>
                <router-view />
            </v-main>
        </v-layout>
    </v-card>
    <Error401 v-else />
</template>
<script>
import { getUserInfo } from './api/auth';
import Error401 from './views/error/Error401';

export default {
    components: { Error401 },
    data() {
        return {
            containerStatus:true,
            showErrorPage: false,
            drawer: true,
            rail: false,
            appBarTitle: '主页',
            menuList: [
                {
                    title: "主页",
                    value: "home",
                    to: "/",
                    prepIcon: "mdi-home-city",
                },
                {
                    title: "用户管理",
                    value: "admin-account",
                    to: "/admin/user-and-permission",
                    prepIcon: "mdi-account-group-outline",
                },
                {
                    title: "词典管理",
                    value: "admin-book",
                    to: "/admin/book",
                    prepIcon: "mdi-book",
                },
                {
                    title: "单词管理",
                    value: "admin-word",
                    to: "/admin/word",
                    prepIcon: "mdi-alphabetical",
                },
                {
                    title: "标签管理",
                    value: "admin-label",
                    to: "/admin/label",
                    prepIcon: "mdi-tag",
                },
                {
                    title: "语种管理",
                    value: "admin-language",
                    to: "/admin/language",
                    prepIcon: "mdi-web",
                },
                // {
                //     title: "网站设置",
                //     value: "admin-web-config",
                //     to: "/admin/web-config",
                //     prepIcon: "mdi-run",
                //     children: [
                //         {
                //             title: "主题颜色",
                //             value: "admin-web-config-theme",
                //             to: "/admin/web-config-theme",
                //             prepIcon: "mdi-run",
                //         }
                //     ]
                // },
                {
                    title: "后台任务",
                    value: "admin-back-task",
                    to: "/admin/back-task",
                    prepIcon: "mdi-run",
                },
                {
                    title: "系统日志",
                    value: "admin-logs",
                    to: "/admin/logs",
                    prepIcon: "mdi-notebook",
                },
                {
                    title: "资源文件",
                    value: "admin-sources",
                    to: "/admin/sources",
                    prepIcon: "mdi-file-document",
                },
                {
                    title: "回收站",
                    value: "admin-recycle",
                    to: "/admin/recycle",
                    prepIcon: "mdi-recycle",
                },
            ],
            userInfo: null
        }
    },
    created() {
        if (window.innerWidth < 1200) {
            document.location.href = "/index.html"
        } else this.loadUserinfo()
        window.onerror = function (message, source, lineno, colno, error) {
            console.log(message, source, lineno, colno, error)
        }
    },
    methods: {
        menuClick(index) {
            this.appBarTitle = this.menuList[index].title
        },
        loadUserinfo() {
            getUserInfo().then(resp => {
                if (resp.data == null) document.location.href = '/login.html?redirect_url=' + document.location.href;
                else {
                    this.userInfo = resp.data
                    this.$store.commit('updateUserInfo', this.userInfo)
                    this.containerStatus=this.$store.state.userPermissionArray.length==0
                    if (!this.userInfo.permissionArray.includes('show-page-admin')) {
                        this.showErrorPage = true
                        document.location.href = '/index.html'
                    }
                }
            })
        },
    },

};
</script>